<template>
  <u-popup
    v-model="show"
    mode="bottom"
    border-radius="24"
    safe-area-inset-bottom
    closeable
  >
    <template v-if="item">
      <view class="title">商品清单(共{{ item.goods_list.length }}件)</view>

      <scroll-view scroll-y>
        <view class="list" v-if="item">
          <view class="itemCon" v-for="(el, i) of item.goods_list" :key="i">
            <view class="img">
              <image mode="aspectFill" :src="el.goods_pic" lazy-load></image>
            </view>

            <view class="con">
              <view class="name"> {{ el.goods_name }} </view>
              <view class="time" v-if="item.book_info">
                预约时间：{{ item.book_info.worker_time }}
                <view class="num">X{{ el.num }}</view>
              </view>
              <view class="price">
                ¥<view>{{ getPrice(el.price)[0] }}</view
                >.{{ getPrice(el.price)[1] }}
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </template>
  </u-popup>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: null,
    },
  },

  computed: {
    getPrice() {
      return (price) => {
        return price ? price.split(".") : ["0", "00"];
      };
    },
  },

  data() {
    return {
      show: false,
    };
  },
};
</script>

<style lang="less" scoped>
.itemCon {
  display: flex;
  padding: 24rpx;
  border-bottom: 1px solid #f2f2f2;

  &:last-of-type {
    border-bottom: 0;
  }
}

.img {
  position: relative;
  margin-right: 20rpx;
  width: 160rpx;
  height: 160rpx;

  image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 16rpx;
    background: #000;
  }
}

.con {
  flex: 1;
  overflow: hidden;
  font-size: 24rpx;
  color: #8c8c8c;
}

.name {
  font-size: 28rpx;
  flex: 1;
  overflow: hidden;
  color: #262626;
}

.time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 0 14rpx;
  font-size: 24rpx;
  color: #8c8c8c;
}

.price {
  display: flex;
  align-items: flex-end;
  font-size: 24rpx;
  color: #262626;
  font-weight: bold;

  view {
    font-size: 32rpx;
    font-weight: bold;
    line-height: 1.2;
  }
}

.title {
  padding: 24rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: #262626;
}

scroll-view {
  max-height: 800rpx;
  overflow-y: auto;
}
</style>
